<template>
  <div class="city-wrapper">
    <city-left
      :cityList="cityList"
      :tabIndex="tabIndex"
      @tabClick="tabClick"
    ></city-left>
    <city-right
      :cityList="cityList"
      :tabIndex="tabIndex"
      @onCityItem="onCityItem"
    ></city-right>
  </div>
</template>

<script>
import axios from 'axios'
import CityLeft from './CityLeft.vue'
import CityRight from './CityRight.vue'
export default {
  name: 'city-map', // 不要起跟标签相同的名字
  components: {
    CityLeft,
    CityRight,
  },
  data() {
    return {
      cityList: [],
      tabIndex: 0,
    }
  },
  created() {
    this.getCityList()
  },
  methods: {
    async getCityList() {
      const res = await axios.get('/api/city')
      const data = res.data.data
      console.log('res:', data)
      this.cityList = data
    },
    tabClick(index) {
      this.tabIndex = index
    },
    onCityItem(item) {
      item.check = !item.check
      if (item.check) {
        this.cityList[this.tabIndex].selectedArr.push(item)
      } else {
        const removeIndex = this.cityList[this.tabIndex].selectedArr.findIndex(
          (v) => v.id === item.id
        )
        this.cityList[this.tabIndex].selectedArr.splice(removeIndex, 1)
      }
    },
  },
}
</script>

<style lang="scss">
.city-wrapper {
  width: 100%;
  display: flex;
  .left {
    flex: 3;
    span {
      margin: 5px;
      padding: 5px;
      border: 1px solid #000;
      border-radius: 5px;
      line-height: 20px;
      font-size: 12px;
      display: inline-block;
      &.active {
        background: red;
        color: gold;
      }
    }
  }
  .right {
    flex: 7;
    // display: flex;
    // flex-wrap: wrap;
    span {
      // height: 35px;
      // flex: 1;
      margin: 5px;
      padding: 5px;
      border: 1px solid #000;
      border-radius: 5px;
      &.active {
        background: skyblue;
        color: #000;
      }
      // display: inline-block;
    }
  }
}
</style>
